<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title>选择框</title>
		<link href="css/mobiscroll.custom-2.16.1.min.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<script src="js/mobiscroll.custom-2.16.1.min.js"></script>
	</head>

	<body style="text-align: center;">
		<input type="button" value="di" onclick="dia()"><br>
		<select id="select">
			<option value="1">Kanon</option>
			<option value="2">Air</option>
			<option value="3">Clannd</option>
			<option value="4">planetarian</option>
			<option value="5">Little Busters!</option>
			<option value="6">Rewrite</option>
			<option value="7">Angel Beats!</option>
			<option value="8">Charlotte</option>
			<option value="9">Harmonia</option>
		</select><br>
		<input type="text" id="select2" readonly placeholder="请选择"><br>
		<input id="date" type="text" readonly placeholder="填写日期"><br>
		<input id="time" type="text" readonly placeholder="填写时间"><br>
		<select  multiple=”multiple”>
			<option value="1">Kanon</option>
			<option value="2">Air</option>
			<option value="3">Clannd</option>
			<option value="4">planetarian</option>
			<option value="5">Little Busters!</option>
			<option value="6">Rewrite</option>
			<option value="7">Angel Beats!</option>
			<option value="8">Charlotte</option>
			<option value="9">Harmonia</option>
		</select>
		<button onclick="dian()">点我</button>
		<script>
			$(function() {
				$('#select').mobiscroll().select({
					theme: 'android-holo-light',
					lang: 'zh',
					display: 'modal', //显示方式 :center inline bubble top bottom modal
					mode: 'scroller', //选择模式
					closeOnOverlay: false,
					headerText: function(valueText) {
						//return valueText;
						return 'Key';
					},
					onCancel: function(event, inst) {}
				});

				$('#select2').mobiscroll().select({
					theme: 'android-holo-light',
					lang: 'zh',
					display: 'bottom', //显示方式 :center inline bubble top bottom modal
					mode: 'scroller', //选择模式
					closeOnOverlay: false,
					data: [{
						text: 'aa',
						value: '1',
						group: 'a'
					}, {
						text: 'be',
						value: '2',
						group: 'b'
					}, {
						text: 'bbe',
						value: '3',
						group: 'b'
					}],
					dataText: 'text',
					dataValue: 'value',
					dataGroup: 'group',
					group: {
						header: false,
						groupWheel: true,
						clustered: false
					},
					headerText: function(valueText) {
						return valueText;
					},
					onCancel: function(event, inst) {}
				});

				$('#date').mobiscroll().date({
					theme: 'android-holo-light',
					lang: 'zh',
					display: 'bottom', //显示方式 :center inline bubble top bottom modal
					mode: 'scroller', //选择模式
					closeOnOverlay: false,
					dateFormat: 'yyyy/mm/dd',
					showLabel: true,
					buttons: ['set', 'now', 'cancel'],
					nowText: '今日',
					startYear: 2000, //开始年份
					endYear: 2030, //结束年份
					onClose: function(valueText, btn, inst) {
						//debugger;
						if('set' == btn) {
							alert(JSON.stringify(inst.settings));
							//alert(JSON.stringify(inst));
						}
					},
					onCancel: function(event, inst) {}
				});
			});

			function dia() {
				alert($('#select').val());
			}
			
			function dian(){
				window.close();
			}
		</script>
	</body>

</html>